<template>
	<div class="home <!--height0-->">
		<el-row id="artList" type="flex" justify="space-around" ><!--style="height: 0;"-->
			<el-col :span="16">
				<el-row class="art-item" v-for="article in articles" :key="article.article_id">
					<el-card shadow="hover">
						<h5 style="height: 26px;overflow: hidden;"><router-link :to="{path:'/index/article/'+article.article_id}" tag="span" class="art-title">{{article.article_title}}</router-link></h5>
						<el-row class="art-info d-flex align-items-center justify-content-start">
							<div class="art-time"><i class="el-icon-time"></i>：{{article.article_date}}</div>
							<div class="d-flex align-items-center"><img class="tag" src="@/assets/tag.png" />：
								<el-tag size="mini">swagger</el-tag>
							</div>
						</el-row>
						<el-row class="art-body">
							<div class="side-img hidden-sm-and-down"><img class="art-banner" src="@/assets/vue.jpg"></div>
							<div class="side-abstract">
								<div class="art-abstract">
									<span style="">
										{{article.article_content}}
									</span>
								</div>
								<div class="art-more">
									<router-link :to="{path:'/index/article/'+article.article_id}" tag="span">
										<el-button plain>{{$t('home.readMore')}}</el-button>
									</router-link>
									<div class="view"><i class="el-icon-view"></i>{{article.article_views}}</div>
								</div>
							</div>
						</el-row>
					</el-card>
					<img class="star" src="@/assets/star.png" />
				</el-row>
				<div class="block pagination">
						<el-pagination
								background=""
								@current-change="pageChange()"
								:current-page.sync="curPage"
								layout="prev, pager, next"
								:page-size="pageSize"
								:total="count">
					</el-pagination>
				</div>
			</el-col>
			<el-col :span="6" class="hidden-sm-and-down" id="side">
				<div class="item">
					<tag></tag>
				</div>
				<div class="item">
					<friend></friend>
				</div>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	import friend from '@/components/friend'
	import tag from '@/components/tag'
	import {getArticleList,getArticleCount} from "@/api/article";
	import {getSimpleText} from "@/api/utils";

	export default {
		name: 'home',
		components: {
			friend,
			tag
		},
		data(){
			return{
				articles:[],
				count:0,
				curPage:1,
                pageSize:5,
			}
		},
		methods:{
			 async init(curPage, pageSize) {
				 let articles = await getArticleList(curPage, pageSize);
				 for (let i = 0; i < articles.length; i++) {
					 articles[i].article_content = getSimpleText(articles[i].article_content);
				 }
				 this.articles = articles;
				 this.count = await getArticleCount();

                 /*this.$emit('getHeight', this.articles.length*345+92);*/
			 },
			pageChange(){
				this.init(this.curPage,this.pageSize);
			}
		},
		mounted() {
			this.init(1,this.pageSize);
		},
	}
</script>

<style scoped>
	#side .item {
		margin-bottom: 30px;
	}

	.art-item {
		margin-bottom: 30px;
		position: relative;
	}

	.art-item .star {
		width: 60px;
		height: 60px;
		position: absolute;
		top: 0;
		right: 0;
	}

	img.tag {
		width: 16px;
		height: 16px;
	}

	.art-title {
		border-left: 3px solid #F56C6C;
		padding-left: 5px;
		cursor: pointer;

		word-wrap:break-word;
		word-break:break-all;

		height: 100%;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.art-title:hover {
		padding-left: 10px;
		color: #409EFF;
	}

	.art-time {
		margin-right: 20px;
	}

	.art-body {
		display: flex;
		padding: 10px 0;
	}

	.side-img {
		height: 146px;
		width: 270px;
		overflow: hidden;
		margin-right: 10px;
	}

	img.art-banner {
		width: 100%;
		height: 100%;
		transition: all 0.6s;
	}

	img.art-banner:hover {
		transform: scale(1.4);
	}

	.side-abstract {
		flex: 1;
		display: flex;
		flex-direction: column;

		height: 146px;
	}

	.art-abstract {
		flex: 1;
		color: #aaa;

		word-wrap:break-word;
		word-break:break-all;

		height: 10px;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.art-more {
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.art-more .view {
		color: #aaa;
	}
	h5{
		font-size: 18px;
	}
	.pagination {
		background-color: #F9F9F9;
	}

</style>
